<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>更换手机</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/ydui/ydui.rem.css">
    <link rel="stylesheet" href="static/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/css/main.css">
    <!-- 引入rem自适应类库 -->
    <script src="static/ydui/ydui.flexible.js"></script>
</head>
<body>
<div id="app" v-cloak style="height:100%;background-color: #fff;">
    <yd-layout>
    	
    	<yd-navbar slot="navbar" title="更换手机">
            <a href="javascript:history.back(-1);" slot="left">
                <yd-navbar-back-icon>返回</yd-navbar-back-icon>
            </a>
        </yd-navbar>

        <div id="step-1" v-show="step==1">
            <div class="ox-login-title">验证原手机号</div>
            <div class="ox-login-sub-title">&nbsp;</div>
            <yd-cell-group class="ox-login-cell-group">
                <yd-cell-item>
                    <span slot="left">手机号：</span>
                    <input slot="right" type="number" placeholder="请输入手机号" v-model="oldPhone">
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">验证码：</span>
                    <input type="text" slot="right" placeholder="请输入短信验证码" v-model="oldCode">

                    <!-- ↓↓关键代码是这里↓↓ -->
                    <yd-sendcode slot="right"
                                 v-model="countDown1"
                                 @click.native="getOldCode"
                                 type="hollow"
                    ></yd-sendcode>
                    <!-- ↑↑关键代码是这里↑↑ -->

                </yd-cell-item>
            </yd-cell-group>

            <div class="yd-button">
                <yd-button size="large" type="hollow" class="ox-login-button" @click.native="nextStep">下一步</yd-button>
            </div>
        </div>

        <div id="step-2" v-show="step==2">
            <div class="ox-login-title">更换手机号</div>
            <div class="ox-login-sub-title">&nbsp;</div>
            <yd-cell-group class="ox-login-cell-group">
                <yd-cell-item>
                    <span slot="left">手机号：</span>
                    <input slot="right" type="number" placeholder="请输入手机号" v-model="newPhone">
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">验证码：</span>
                    <input type="text" slot="right" placeholder="请输入短信验证码" v-model="newCode">

                    <!-- ↓↓关键代码是这里↓↓ -->
                    <yd-sendcode slot="right"
                                 v-model="countDown2"
                                 @click.native="getNewCode"
                                 type="hollow"
                    ></yd-sendcode>
                    <!-- ↑↑关键代码是这里↑↑ -->

                </yd-cell-item>
            </yd-cell-group>

            <div class="yd-button">
                <yd-button size="large" type="hollow" class="ox-login-button" @click.native="confirmChange">确定</yd-button>
            </div>
        </div>

    </yd-layout>
</div>
<!-- 引入 Vue -->
<script src="static/lib/vue.min.js"></script>
<script src="static/lib/jquery.min.js"></script>
<script src="static/lib/fastclick.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>
<!-- 引入组件库 -->
<script src="static/ydui/ydui.rem.js"></script>
<script src="static/js/common.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            step:1
            ,oldPhone:''
            ,oldCode:''
            ,newPhone:''
            ,newCode:''
            ,countDown1: false
            ,countDown2: false
        },
        created:function () {
            this.oldPhone = this.getUrlParam('phone');
        },
        methods: {
            getUrlParam:function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                if (r != null) return unescape(r[2]); return null; //返回参数值
            },
            getOldCode:function () {
                if(!vm.oldPhone){
                    this.$dialog.toast({
                        mes: '手机号不能为空',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }else if(!/1[3|4|5|6|7|8|9]\d{9}/.test(vm.oldPhone)){
                    this.$dialog.toast({
                        mes: '手机号格式错误',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }else if(vm.oldPhone.length != 11){
                    this.$dialog.toast({
                        mes: '您输的不是手机号',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }

                var pt = this;
                pt.$dialog.loading.open('发送中...');

                $.ajax({
                    type: "POST",
                    url: baseURL + "/api/v1/sms/send/sm",
                    data: JSON.stringify({"mobile":vm.oldPhone,"action":"change-mobile"}),
                    contentType: "application/json",
                    dataType:  "json",
                    success: function(r){
                        pt.$dialog.loading.close();
                        pt.countDown1 = true;

                        if(r.code == 1){
                            pt.countDown = true;
                            pt.$dialog.toast({
                                mes: '发送成功',
                                icon: 'success',
                                timeout: 1500
                            });
                        }else {
                            pt.$dialog.toast({
                                mes: '发送失败',
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    },
                    error:function(e){
                        pt.$dialog.loading.close();
                        if(typeof e.responseJSON != 'undefined'){
                            pt.$dialog.toast({
                                mes: e.responseJSON.message,
                                icon: 'error',
                                timeout: 1500
                            });
                        }else {
                            pt.$dialog.toast({
                                mes: '服务异常',
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    }
                });
            },
            nextStep: function () {
                if(!vm.oldPhone){
                    this.$dialog.toast({
                        mes: '手机号不能为空',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }else if(!/1[3|4|5|6|7|8|9]\d{9}/.test(vm.oldPhone)){
                    this.$dialog.toast({
                        mes: '手机号格式错误',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }else if(vm.oldPhone.length != 11){
                    this.$dialog.toast({
                        mes: '您输的不是手机号',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }

                if(!vm.oldCode){
                    this.$dialog.toast({
                        mes: '验证码不能为空',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }else if(!/^[0-9]+.?[0-9]*$/.test(vm.oldCode)){
                    this.$dialog.toast({
                        mes: '验证码格式错误',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }else if(vm.oldCode.length != 6){
                    this.$dialog.toast({
                        mes: '验证码格式错误',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }

                var pt = this;
                pt.$dialog.loading.open('验证中...');

                $.ajax({
                    type: "POST",
                    url: baseURL + "/api/v1/sms/verify/sm",
                    data: JSON.stringify({mobile:vm.oldPhone,code: vm.oldCode}),
                    contentType: "application/json",
                    dataType:  "json",
                    success: function(r){
                        pt.$dialog.loading.close();
                        if(r.code == 1){
                            vm.step = 2;
                        }else {
                            pt.$dialog.toast({
                                mes: r.message,
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    },
                    error:function(e){
                        pt.$dialog.loading.close();
                        if(typeof e.responseJSON != 'undefined'){
                            pt.$dialog.toast({
                                mes: e.responseJSON.code,
                                icon: 'error',
                                timeout: 1500
                            });
                        }else {
                            pt.$dialog.toast({
                                mes: '服务异常',
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    }
                });
            },
            getNewCode:function () {
                if(!vm.newPhone){
                    this.$dialog.toast({
                        mes: '手机号不能为空',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }else if(!/1[3|4|5|6|7|8|9]\d{9}/.test(vm.newPhone)){
                    this.$dialog.toast({
                        mes: '手机号格式错误',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }else if(vm.newPhone.length != 11){
                    this.$dialog.toast({
                        mes: '您输的不是手机号',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }

                var pt = this;
                pt.$dialog.loading.open('发送中...');

                $.ajax({
                    type: "POST",
                    url: baseURL + "/api/v1/sms/send/sm",
                    data: JSON.stringify({"mobile":vm.newPhone,"action":"change-mobile"}),
                    contentType: "application/json",
                    dataType:  "json",
                    success: function(r){
                        pt.$dialog.loading.close();
                        pt.countDown2 = true;

                        if(r.code == 1){
                            pt.countDown = true;
                            pt.$dialog.toast({
                                mes: '发送成功',
                                icon: 'success',
                                timeout: 1500
                            });
                        }else {
                            pt.$dialog.toast({
                                mes: '发送失败',
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    },
                    error:function(e){
                        pt.$dialog.loading.close();
                        if(typeof e.responseJSON != 'undefined'){
                            pt.$dialog.toast({
                                mes: e.responseJSON.message,
                                icon: 'error',
                                timeout: 1500
                            });
                        }else {
                            pt.$dialog.toast({
                                mes: '服务异常',
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    }
                });
            },
            confirmChange: function () {
                if(!vm.newPhone){
                    this.$dialog.toast({
                        mes: '手机号不能为空',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }else if(!/1[3|4|5|6|7|8|9]\d{9}/.test(vm.newPhone)){
                    this.$dialog.toast({
                        mes: '手机号格式错误',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }else if(vm.newPhone.length != 11){
                    this.$dialog.toast({
                        mes: '您输的不是手机号',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }

                if(!vm.newCode){
                    this.$dialog.toast({
                        mes: '验证码不能为空',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }else if(!/^[0-9]+.?[0-9]*$/.test(vm.newCode)){
                    this.$dialog.toast({
                        mes: '验证码格式错误',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }else if(vm.newCode.length != 6){
                    this.$dialog.toast({
                        mes: '验证码格式错误',
                        icon: 'error',
                        timeout: 1500
                    });
                    return;
                }

                var pt = this;
                pt.$dialog.loading.open('重置中...');

                $.ajax({
                    type: "POST",
                    url: baseURL + "/api/v1/ch-mobile",
                    data: JSON.stringify({new:vm.newPhone,code: vm.newCode}),
                    contentType: "application/json",
                    dataType:  "json",
                    success: function(r){
                        pt.$dialog.loading.close();

                        if(r.code == 'OK'){
                            pt.$dialog.toast({
                                mes: '更换成功',
                                icon: 'success',
                                timeout: 1500,
                                callback:function () {
                                    location.href = 'login.html';
                                }
                            });
                        }else {
                            pt.$dialog.toast({
                                mes: r.code,
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    },
                    error:function(e){
                        pt.$dialog.loading.close();
                        if(typeof e.responseJSON != 'undefined'){
                            pt.$dialog.toast({
                                mes: e.responseJSON.code,
                                mes: e.responseJSON.code,
                                icon: 'error',
                                timeout: 1500
                            });
                        }else {
                            pt.$dialog.toast({
                                mes: '服务异常',
                                icon: 'error',
                                timeout: 1500
                            });
                        }
                    }
                });
            }
        }
    })
</script>
</body>
</html>